<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<jsp:include page="common/header.jsp">
    <jsp:param name="title" value="天天新闻网"/>
</jsp:include>

<!-- 页面主体内容 -->
<main class="container mt-4">
    <!-- 顶部广告图 -->
    <div class="gg mb-4">
        <img src="images/2.png" alt="" class="img-fluid w-100">
    </div>

    <!-- 推荐新闻 -->
    <div class="tuijian mb-4">
        <div class="row">
            <c:forEach items="${recommendNews}" var="news">
                <div class="col-md-4">
                    <div class="card h-100">
                        <img src="images/${news.img_url}" class="card-img-top" alt="" style="height: 200px; object-fit: cover;">
                        <div class="card-body">
                            <p class="card-text">
                                <a href="newsDetail?id=${news.new_id}" class="text-decoration-none text-dark" title="${news.title}">
                                    <c:choose>
                                        <c:when test="${fn:length(news.title) > 25}">
                                            ${fn:substring(news.title, 0, 25)}...
                                        </c:when>
                                        <c:otherwise>
                                            ${news.title}
                                        </c:otherwise>
                                    </c:choose>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>

    <!-- 聚焦新闻 -->
    <div class="jujiao mb-4">
        <div class="row">
            <div class="col-md-6 jujiao_left">
                <img src="images/6.png" alt="" class="img-fluid w-100" style="height: 29rem;">
            </div>
            <div class="col-md-6 jujiao_right">
                <div class="card h-100">
                    <div class="card-header bg-danger text-white">
                        <h5 class="mb-0">要闻聚焦</h5>
                    </div>
                    <div class="card-body" style="padding: 1.3rem">
                        <ul class="list-unstyled news-list">
                            <c:forEach items="${focusNews}" var="news">
                                <li class="d-flex justify-content-between align-items-center">
                                    <a href="newsDetail?id=${news.new_id}" class="text-decoration-none text-dark text-truncate" title="${news.title}">
                                        ${news.title}
                                    </a>
                                    <span class="text-muted ms-2">${fn:substring(news.newTime, 5, 10)}</span>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 中部广告图 -->
    <div class="gg mb-4">
        <img src="images/7.png" alt="" class="img-fluid w-100">
    </div>

    <!-- 深度观察 -->
    <div class="shendu">
        <h5 class="text-danger mb-3">深度观察</h5>
        <div class="row">
            <c:forEach items="${deepNews}" var="news">
                <div class="col-md-3">
                    <div class="card h-100">
                        <img src="images/${news.img_url}" class="card-img-top" alt="" style="height: 160px; object-fit: cover;">
                        <div class="card-body">
                            <p class="card-text">
                                <a href="newsDetail?id=${news.new_id}" class="text-decoration-none text-dark" title="${news.title}">
                                    <c:choose>
                                        <c:when test="${fn:length(news.title) > 25}">
                                            ${fn:substring(news.title, 0, 25)}...
                                        </c:when>
                                        <c:otherwise>
                                            ${news.title}
                                        </c:otherwise>
                                    </c:choose>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</main>

<jsp:include page="common/footer.jsp"/>
